<template>
			<div>
					<div>
						<ul class="nav nav-tabs" v-el:nav>
							<li v-if="news" :class="{active: msgType=='news'}"  @click="setType('news')"><a href="javascript:;">图文</a></li>
							<li :class="{active: msgType=='image'}"  @click="setType('image')"><a href="javascript:;">图片</a></li>
							<li :class="{active: msgType=='text'}" @click="setType('text')"><a href="javascript:;">文字</a></li>
						</ul>
					</div>																							    						
					<div class="divide-10"></div>
					<div class="tab-content">
						 <!-- 图文 -->
						 <div v-if="msgType=='news'">														
							<ul class="create_access row" v-if="beforeResource">
								<li><div @click="resource">选择素材库图文</div></li>
								<!-- <li v-token="{token:'新建图文功能'}"> -->
								<li v-token.literal="新建图文功能" data-mode="toggle-box"><div @click="graphic">新建图文消息</div></li>
							</ul>				
							<div v-else class="box-container">
								<div v-if="resourceBox.url" class="box img-responsive" :style="{ 'background-image': 'url(' + resourceBox.url + ')' }"></div>	
								<div  v-else class="placeholder-cover box img-responsive">
								</div>													
								<h4 class="clearfix">
										<span class="pull-left">{{resourceBox.name}}</span>	
								</h4>
								 <button type="button" class="btn btn-box-tool" @click="removeResource">删除 <i class="fa fa-times"></i></button>
							</div>											
						</div>
						 <!-- 图片 -->
						 <div v-if="msgType=='image'">
								<ul class="create_access row" v-if="beforePhoto">
									<li style="float:none;margin:0 auto"><div @click="photo">选择素材库图片</div></li>
								</ul>	
							<div v-else class="box-container">
								<div  v-if="photoBox.url" class="box img-responsive" :style="{ 'background-image': 'url(' + photoBox.url + ')' }"></div>		
								<div  v-else class="placeholder-cover box img-responsive">
								</div>														
								<h4 class="clearfix">
										<span class="pull-left">{{photoBox.name}}</span>	
								</h4>
								 <button type="button" class="btn btn-box-tool" @click="removePhoto">删除 <i class="fa fa-times"></i></button>
							</div>												

						 </div>
						 <!-- 文字 -->
						 <div v-if="msgType=='text'">
								<textarea class="form-control" rows="3"  v-model="content" style="min-height:84px" @keyup="size"></textarea>	
								<div class="divide-10"></div>
								<div class="text-right" style="color:#777">
									{{hintSize}}/{{maxlength}}
								</div>										
						 </div>											
					</div>						

					<div class="divide-20"></div>																
			</div>				
		 <modal-graphic v-ref:graphic></modal-graphic>
		 <modal-resource v-ref:resource></modal-resource>
		 <modal-photo v-ref:photo></modal-photo>			
</template>
<script>
	//新建图文信息窗体
	import Graphic from 'pages/partial/graphic.create.vue';
	import Resource from 'pages/partial/resource.vue';
	import Photo from 'pages/partial/photo.vue';		
export default {
	data:() => ({
		msgType: 'news',
		beforeResource: true,
		beforePhoto:true,
		resourceBox: {},
		photoBox:{},
		content: "",
		imageData:{},
		newsData:{},
	}),
	props: {
		news: {
			type: Boolean,
			default:function() {
					return true;
			}				
		},
		maxlength: {
			type: String,
			default: function() {
				 return 500
			}
		}
	},	
	components: {
		'modal-graphic': Graphic,
		'modal-resource':Resource,
		'modal-photo':Photo
	},			
	events: {			
			setResource(arg) {
				//图文信息保存
				this.setResource(arg)
			},				
			setPhoto(arg) {
				//图片信息保存
				this.setPhoto(arg)
			}
	},	
	 computed: {
		 hintSize: function() {
			 return this.content.length
		 }
	 },			
	methods: {
		setResource(arg) {
			let data = {};
			data.media =  arg.id.media;			
			data.artId = arg.artId;
			data.url = arg.url;
			
			this.$set("newsData",data);				
			let box = {
				url: arg.url,
				name: arg.name
			}
			this.$set("resourceBox",box);
			this.$set("beforeResource",false);			
		},
		setPhoto(arg){
			let data = {};
			data.media = arg.id.media;
			data.picId = arg.picId;
			data.url = arg.url;
			this.$set("imageData",data);

			let box = {
				url: arg.url,
				name: arg.name
			}
			this.$set("photoBox",box);				
			this.$set("beforePhoto",false)			
		},
		size(e) {
			let str = e.target.value;				
			let size = str.length;
			
			let max = parseInt(this.maxlength);
			
			let result = '';
			if(size>=max) {
				 result = str.substring(0,max);
				 this.$set("content",result)
			} else {
				 result = str
			}		
		},
		clear() {			
			this.$set("beforeResource",true);
			this.$set("beforePhoto",true);
			this.$set("resourceBox",{});
			this.$set("photoBox",{});
			this.$set("content","");
			this.$set("imageData",{});
			this.$set("newsData",{});
			
			if(this.news) {
				this.$set("msgType","news");				
			} else {
				this.$set("msgType","image");					
			}
		
		},
		removeResource() {
			this.$set("beforeResource",true);
		},	
		removePhoto() {
			this.$set("beforePhoto",true);
		},				
		get() {
			let data = {};
			data.msgType = this.msgType;
			if(this.msgType=='text') {
				data.content = this.content;
			} else if(this.msgType=='image') {
				data = Object.assign(data,this.imageData)				
			} else if(this.msgType=='news'){
				data = Object.assign(data,this.newsData)
			}
			return data;
		},		
		valid() {
			 if(this.msgType == "image") {
				 if(this.beforePhoto) {
					 let message = {
						 title: "操作提示",
						 content: "尚未选择图片"
					 }
					 Midway.alert(message);
					 return false;
				 } else {
					 return true;
				 }
			 } else if(this.msgType == "news") {
				 if(this.beforeResource) {
					 let message = {
						 title: "操作提示",
						 content: "尚未选择图文"
					 }
					 Midway.alert(message);
					 return false;							 
				 } else {
					 return true;
				 }
			 } else if(this.msgType == "text") {
				 	if(this.content.trim()=="") {
						let message = {
						 title: "操作提示",
						 content: "请输入内容"							
						}
						Midway.alert(message);
						return false;
					} else {
						return true;
					}
			 } 		
		},
		graphic() {
				this.$refs.graphic.init();			
		},
		resource() {
				this.$refs.resource.init();
		},
		photo() {
				this.$refs.photo.init();
		},			
		setType(text) {
			this.$set("msgType",text);
		}
	}
}
</script>